<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="./style.css/register.css">
	<link rel="stylesheet" href="./font_78xmwrbhrzu/iconfont.css">
</head>

<style>
	.box {
		z-index: 1;
		width: 200px;
		height: 40px;
		line-height: 40px;
		margin: 50px auto;
		position: absolute;
		position: relative;
		left: 100px;
		top: -44px;
		/* border: 0; */
	}

	.box span {
		display: block;
		height: 40px;
		border: solid 1px black;
	}

	.box ul {
		background-color: #fff;
		margin: 0;
		padding: 0;
		list-style: none;
		border: solid 1px black;
		border-top: none;
		display: none;
	}

	.box ul li {

		text-indent: 4px;
		display: flex;
	}

	.box ul li.hover {
		background: #66f;
		color: #fff;
	}

	.box ul li#active::after {
		content: "*";
		margin-left: auto;
		margin-right: 20px;
	}

	.csrq {
		/* background-color: #66f; */
		/* font-size: 20px; */
		position: absolute;
		/* z-index: 99; */
	}
</style>

<body>
	<div id="header">
		<div></div>
		<div id="header_left">
			<div id="helper">帮助中心</div>
			<div id="languge">简体中文</div>
		</div>
	</div>
	<h1 id="cs">注册账号</h1>
	<div id="content">
		<div id="one" style="position: relative">
			<div style="line-height: 46px;">国家/地区</div>
			<div class="box">
				<span class="sss" style="border:0px;color:black;"></span>
				<ul style="margin-left:  12px; border: 0;">
					<li>上海</li>
					<li>杭州</li>
					<li>南京</li>
				</ul>
			</div>
		</div>
		<!-- <span>成功注册帐号后，国家/地区将不可更改</span> -->
		<div id="tow" style="text-indent: -270px;">
			<div style="line-height: 46px;">出生日期
				<input type="date" class="csrq">
			</div>

		</div>
		<div id="six">
			<input type="text" placeholder="新建用户名" id="username">
		</div>
		<div id="tree" style="position: relative;">
			<input type="text" id="phonenumber" placeholder="请输入手机号" />
			<i style="position: absolute;right:-30px;top: 5px;display: none;">正确</i>
			<i style="position: absolute;right:-30px;top: 5px;display: none;">错误</i>
		</div>
		<div id="four" style="background-color: #fff;">
			<input type="text" placeholder="请输入验证码" id="yzm">
			<input style="cursor:pointer;" type="button" value="获取验证码" id="getid">
		</div>
		<div id="five" style="font-size: 30px;position: relative;" class="iconfont icon-Notvisible">
			<input type="password" placeholder="请输入密码" id="pwd">
			<i style="position: absolute;right:-30px;top: 15px;font-size: 15px;display: none;">正确</i>
			<i style="position: absolute;right:-30px;top: 15px;font-size: 15px;display: none;">错误</i>
		</div>
		<span>密码由 6-16 位数字、字母或符号组成、至少包含两种字符</span>
		<div style="background-color: #fff;">
			<input type="checkbox" name="" id="checkbox">
			<strong> 已阅读并同意<a href="">《账号使用协议》</a>&<a href="">《隐私协议》</a></strong>
		</div>
		<div style="background-color: #fff;">
			<input style="cursor:pointer;" type="submit" id="submit" name="" value="注册" />
		</div>
	</div>
	<div id="bottom">
		<p>© 2005 - 2022 广东欢太 版权所有 粤ICP备 14056724 号-2 联系方式:4001-999-666</p>
	</div>
</body>
<script>

	var ospan = document.querySelector(".box span")
	var oul = document.querySelector(".box ul")
	var ali = oul.children;

	// 1. 设置默认选中项的索引
	var index = 0;
	// 2. 根据默认索引设置默认
	ospan.innerHTML = ali[index].innerHTML;
	ali[index].id = "active";

	// 4. 假设下拉菜单的显示状态：0显示，1隐藏
	var flag = 0;

	// 3. 绑定事件：显示/隐藏
	ospan.onclick = function (eve) {
		var e = eve || window.event;
		e.stopPropagation();
		// 5. 根据状态决定显示或隐藏，同时修改状态        
		if (flag === 0) {
			oul.style.display = "block";
			flag = 1;
			// 18. 每次打开下拉菜单之前，都需要判断如果不是第一次打开
			// 那么都需要将键盘操作回归到初始值
			if (keyIndex !== undefined) {
				ali[keyIndex].className = "";
				keyIndex = undefined;
			}
		} else {
			oul.style.display = "none";
			flag = 0;
		}
	}
	// 6. 点击空白隐藏，同时修改状态（注意事件冒泡）
	document.onclick = function () {
		oul.style.display = "none";
		flag = 0;
	}

	// 7. 解析所有li，并绑定事件
	for (var i = 0; i < ali.length; i++) {
		// 11. 给每个li绑定索引，以备后用
		ali[i].index = i;
		// 8. 进入
		ali[i].onmouseover = function () {
			// 23. 每次鼠标进入之前，先清除键盘的高亮（有键盘索引）
			if (keyIndex !== undefined) {
				ali[keyIndex].className = "";
			}
			// 设置高亮
			this.className = "hover";
			// 20. 鼠标进入时，修改键盘的高亮索引为当前索引
			keyIndex = this.index;
		}
		// 9. 离开
		ali[i].onmouseout = function () {
			// 取消高亮
			// this.className = "";
			// 21. 因为鼠标进入时，绝对会将当前元素的索引设置为键盘控制的索引
			// 所以，取消可能存在的键盘的高亮（替换原有取消鼠标离开时的高亮代码）
			ali[keyIndex].className = "";
			// 22. 因为每次鼠标离开，都会清除高亮，所以为了保证键盘效果的正确，初始化键盘索引
			keyIndex = undefined;
		}
		// 10. 点击
		ali[i].onclick = function () {
			// 将点击的项的内容设置到显示区域
			ospan.innerHTML = this.innerHTML;
			// 取消之前的选中项
			ali[index].id = "";
			// 给当前添加选中项
			this.id = "active";
			// 12. 本次点的 是 下次要取消的
			index = this.index;
		}
	}

	// ---------

	// 键盘

	// 13. 设置键盘高亮索引
	var keyIndex = undefined;

	// 键盘事件
	document.onkeydown = function (eve) {
		// 24. 下拉菜单如果没有显示，不应该有键盘事件
		if (flag === 0) return;

		var e = eve || window.event;
		var code = e.keyCode || e.which;
		// 上键
		if (code === 38) {
			// 14. 第一个按“上键”
			if (keyIndex === undefined) {
				keyIndex = ali.length - 1;
			} else
				// 15. 非第一次按“上键”且到达“上键”的终点
				if (keyIndex === 0) {
					keyIndex = 0;
				} else {
					// 16. 既不是第一次按“上键”，也没有到达终点
					keyIndex--;
				}
			// 17. 根据键盘的高亮索引，设置样式
			setKeyActive(keyIndex);
		}
		// 下键，同上键
		if (code === 40) {
			if (keyIndex === undefined) {
				keyIndex = 0;
			} else if (keyIndex === ali.length - 1) {
				keyIndex = ali.length - 1;
			} else {
				keyIndex++;
			}
			setKeyActive(keyIndex);
		}
		// 19. 回车
		if (code === 13) {
			// 将键盘选中的项的文字设置到显示区域
			ospan.innerHTML = ali[keyIndex].innerHTML;
			// 取消之前选中的项的标志（*）
			ali[index].id = "";
			// 给当前选中的项添加标志（*）
			ali[keyIndex].id = "active";
			// 将当前选中的项的索引设置成下次回车要取消的索引
			index = keyIndex;
			// 隐藏下拉菜单
			oul.style.display = "none";
			// 同步状态
			flag = 0;
		}
	}

	function setKeyActive(now) {
		for (var i = 0; i < ali.length; i++) {
			ali[i].className = "";
		}
		ali[now].className = "hover"
	}

	const eye = document.getElementsByClassName("iconfont")[0];
	const pwd = document.getElementById("pwd");
	const phonenumber = document.querySelector("#phonenumber");
	const submit = document.querySelector("#submit");
	const getid = document.querySelector("#getid")
	const username = document.querySelector("#username")
	// console.log(username)
	const checkbox = document.querySelector("#checkbox")
	const csrq = document.querySelector(".csrq")
	const sss = document.querySelector(".sss")
	const yzm = document.querySelector("#yzm")
	var ggg = 0
	var uflag = 0;
	var aflag = 0;
	var timer = null;
	const cs = document.querySelector("#cs")
	phonenumber.oninput = function () {
		let str = this.value;
		let telreg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
		if (!telreg.test(str)) {
			aflag = 1;
			this.nextElementSibling.style.display = "none"
		} else {
			aflag = 0;
			this.nextElementSibling.style.display = "block"
		}
		if (str.length == 11) {
			getid.style.backgroundColor = "skyblue";
		}
	}
	pwd.oninput = function () {
		let reg = /^[a-zA-Z]\w{5,7}$/;
		let atr = this.value
		if (!reg.test(atr)) {
			uflag = 1;
			this.nextElementSibling.style.display = "none"
		} else {
			uflag = 0;
			this.nextElementSibling.style.display = "block"
		}
	}
	submit.onclick = function () {
		if (uflag == 0 && aflag == 0) {
			// cs.innerHTML = "ok";
			pwd.nextElementSibling.style.display = "block";
			phonenumber.nextElementSibling.style.display = "block"
		} else if (uflag == 1 && aflag == 0) {
			// cs.innerHTML = "密码错误";
			pwd.nextElementSibling[2].style.display = "block";
		} else if (uflag == 0 && aflag == 1) {
			cs.innerHTML = "手机号错误";
		} else if (uflag == 1 && aflag == 1) {
			cs.innerHTML = "手机密码格式错误";
		}
	}
	//验证码
	var a
	getid.onclick = function () {
		clearInterval(timer);
		timer = setInterval(function () {
			a = rand(1000, 9999);
			alert(a);
			// console.log(a);
			clearInterval(timer)
		}, 1000);
	}
	function rand(min, max) {
		return Math.floor(Math.random() * (max - min)) + min;
	}

	eye.onclick = function () {
		// console.log("11")
		if (ggg == 0) {
			pwd.type = "password";
			eye.className = "iconfont icon-browse"
			ggg = 1;
		} else {
			pwd.type = "text";
			eye.className = "iconfont icon-Notvisible"
			ggg = 0;
		}
	}

	var s = csrq.value
	submit.onclick = function () {
		if (checkbox.checked != true) {
			alert("请勾选协议")
			return
		}
		if (yzm.value != a) {
			alert("验证码错误")
			return
		}
		if (username.value == "") {
			// o = 1
			alert("填写信息不正确,请重新填写")
			return
		}
		ajax({
			type: "post",
			url: "http://localhost:3000/register",
			data: {
				username: username.value,
				password: pwd.value,
				tel: phonenumber.value,
				chengshi: sss.innerHTML,
				birthday: csrq.value,

			},
			success: res => {
				// console.log("success", res);
				setTimeout(function () {
					alert("注册成功,点击确认跳转登录")
					location.href = "http://localhost:3000/login.html"
				}, 1000)
			},
			error: code => {
				console.log("error", code);
			},
		})
	}
	// 密码规则// a_12343
	function ajax(ops = {}) {
		let { type = "get", success, error, url, data = {}, timeout = 100 } = ops;
		let str = "";
		for (let i in data) {
			str += `${i}=${data[i]}&`;
		}
		url = type === "get" ? url + "?" + str.slice(0, -1) : url;
		const xhr = new XMLHttpRequest();
		xhr.timeout = timeout;
		xhr.open(type, url, true);
		xhr.onload = function () {
			if (xhr.status === 200) {
				if (success) success(xhr.responseText);
			} else {
				if (error) error(xhr.status);
			}
		}
		xhr.ontimeout = function () {
			if (error) error("timeout");
			xhr.abort();
		}
		if (type === "post") {
			xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xhr.send(str.slice(0, -1));
		} else {
			xhr.send();
		}
	}
</script>

</html>